HC: Flat titlebuttons became non-flat in backdrop

When the window was backdropped, they suddenly regained their border.
This was clearly not intentional or of any practical use to anyone.

Shuffle around some selectors so that the backdrop ones do not override
the flat ones and make the borders magically reappear when backdropped.

Note that, whereas standard titlebuttons get the border on :hover, other
.flat buttons in the headerbar do not. That should probably be fixed too

https://bugzilla.gnome.org/show_bug.cgi?id=788580

diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index 00d79771fe5cb15f213c15e09f31b69e3ef28d20..a1ed2c805a4dc79305bebd8db62505c01128decb 100644 (file)
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -363,8 +363,32 @@ button {
 
     @include button(normal);
 
+    &:disabled {
+      @include button(insensitive);
+
+      &:active,
+      &:checked { @include button(insensitive-active); }
+    }
+
+    &:backdrop {
+      @include button(backdrop);
+
+      -gtk-icon-effect: none;
+
+      &:active,
+      &:checked { @include button(backdrop-active); }
+
+      &:disabled {
+        @include button(backdrop-insensitive);
+
+        &:active,
+        &:checked { @include button(backdrop-insensitive-active); }
+      }
+    }
+
     &.flat {
       @include button(undecorated);
+
       // to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set
       // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
       // it won't fade out when the pointer leave the button allocation area. To make the transition more evident
@@ -377,9 +401,9 @@ button {
 
         &:active { transition: $_button_transition; }
       }
-      
-      &:backdrop, 
-      &:disabled, 
+
+      &:backdrop,
+      &:disabled,
       &:backdrop:disabled {
         @include button(undecorated-insensitive);
       }
@@ -397,29 +421,6 @@ button {
       transition-duration: 50ms;
     }
 
-    &:backdrop {
-      @include button(backdrop);
-
-      -gtk-icon-filter: none;
-
-      &:active,
-      &:checked { @include button(backdrop-active); }
-
-      &:disabled {
-        @include button(backdrop-insensitive);
-
-        &:active,
-        &:checked { @include button(backdrop-insensitive-active); }
-      }
-    }
-
-    &:disabled {
-      @include button(insensitive);
-
-      &:active,
-      &:checked { @include button(insensitive-active); }
-    }
-
     &.image-button {
       min-width: 24px;
       padding-left: 4px;

diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css b/gtk/theme/HighContrast/gtk-contained-inverse.css
index 5e6ac493a6232a504cda2bd98b14073271bcb2c8..ddafbf95a52e275acdee641cdc38b7b937afd97f 100644 (file)
--- a/gtk/theme/HighContrast/gtk-contained-inverse.css
+++ b/gtk/theme/HighContrast/gtk-contained-inverse.css
@@ -158,29 +158,29 @@ spinbutton:not(.vertical) progress:backdrop, entry progress:backdrop { backgroun
 
 button.titlebutton, button { min-height: 24px; min-width: 16px; padding: 4px 8px; border: 1px solid; border-radius: 3px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border-width: 2px; border-style: solid; color: #fff; background-image: none; background-color: #000; border-color: gray; }
 
-button.sidebar-button, button.titlebutton, button.flat { border-width: 2px; border-style: solid; color: #fff; background-color: transparent; background-image: none; border-color: transparent; transition: none; }
+button.titlebutton:disabled, button:disabled { border-width: 2px; border-style: solid; color: gray; background-color: #070707; border-color: #494949; background-image: none; }
 
-button.sidebar-button:hover, button.titlebutton:hover, button.flat:hover { transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-duration: 500ms; }
+button.titlebutton:disabled:active, button.titlebutton:disabled:checked, button:disabled:active, button:disabled:checked { border-width: 2px; border-style: solid; color: gray; border-color: #494949; background-image: none; background-color: #070707; }
 
-button.sidebar-button:hover:active, button.titlebutton:hover:active, button.flat:hover:active { transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
+button.titlebutton:backdrop, button:backdrop { border-width: 2px; border-style: solid; color: #fff; background-color: #000; border-color: #737373; background-image: none; -gtk-icon-effect: none; }
 
-button.sidebar-button:backdrop, button.titlebutton:backdrop, button.sidebar-button:disabled, button.titlebutton:disabled, button.sidebar-button:backdrop:disabled, button.titlebutton:backdrop:disabled, button.flat:backdrop, button.flat:disabled, button.flat:backdrop:disabled { border-width: 2px; border-style: solid; color: gray; background-color: transparent; background-image: none; border-color: transparent; }
+button.titlebutton:backdrop:active, button.titlebutton:backdrop:checked, button:backdrop:active, button:backdrop:checked { border-width: 2px; border-style: solid; color: black; background-color: #737373; border-color: #737373; background-image: none; }
 
-button.titlebutton:hover, button:hover { border-width: 2px; border-style: solid; color: #fff; background-color: #000; border-color: gray; background-image: none; -gtk-icon-filter: brightness(1.2); }
+button.titlebutton:backdrop:disabled, button:backdrop:disabled { border-width: 2px; border-style: solid; color: gray; background-color: #070707; border-color: #494949; background-image: none; }
 
-button.titlebutton:active, button.titlebutton:checked, button:active, button:checked { border-width: 2px; border-style: solid; background-image: none; color: black; background-color: white; border-color: gray; transition-duration: 50ms; }
+button.titlebutton:backdrop:disabled:active, button.titlebutton:backdrop:disabled:checked, button:backdrop:disabled:active, button:backdrop:disabled:checked { border-width: 2px; border-style: solid; color: gray; border-color: #494949; background-image: none; background-color: #090909; }
 
-button.titlebutton:backdrop, button:backdrop { border-width: 2px; border-style: solid; color: #fff; background-color: #000; border-color: #737373; background-image: none; -gtk-icon-filter: none; }
+button.sidebar-button, button.titlebutton, button.flat { border-width: 2px; border-style: solid; color: #fff; background-color: transparent; background-image: none; border-color: transparent; transition: none; }
 
-button.titlebutton:backdrop:active, button.titlebutton:backdrop:checked, button:backdrop:active, button:backdrop:checked { border-width: 2px; border-style: solid; color: black; background-color: #737373; border-color: #737373; background-image: none; }
+button.sidebar-button:hover, button.titlebutton:hover, button.flat:hover { transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-duration: 500ms; }
 
-button.titlebutton:backdrop:disabled, button:backdrop:disabled { border-width: 2px; border-style: solid; color: gray; background-color: #070707; border-color: #494949; background-image: none; }
+button.sidebar-button:hover:active, button.titlebutton:hover:active, button.flat:hover:active { transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
 
-button.titlebutton:backdrop:disabled:active, button.titlebutton:backdrop:disabled:checked, button:backdrop:disabled:active, button:backdrop:disabled:checked { border-width: 2px; border-style: solid; color: gray; border-color: #494949; background-image: none; background-color: #090909; }
+button.sidebar-button:backdrop, button.titlebutton:backdrop, button.sidebar-button:disabled, button.titlebutton:disabled, button.sidebar-button:backdrop:disabled, button.titlebutton:backdrop:disabled, button.flat:backdrop, button.flat:disabled, button.flat:backdrop:disabled { border-width: 2px; border-style: solid; color: gray; background-color: transparent; background-image: none; border-color: transparent; }
 
-button.titlebutton:disabled, button:disabled { border-width: 2px; border-style: solid; color: gray; background-color: #070707; border-color: #494949; background-image: none; }
+button.titlebutton:hover, button:hover { border-width: 2px; border-style: solid; color: #fff; background-color: #000; border-color: gray; background-image: none; -gtk-icon-filter: brightness(1.2); }
 
-button.titlebutton:disabled:active, button.titlebutton:disabled:checked, button:disabled:active, button:disabled:checked { border-width: 2px; border-style: solid; color: gray; border-color: #494949; background-image: none; background-color: #070707; }
+button.titlebutton:active, button.titlebutton:checked, button:active, button:checked { border-width: 2px; border-style: solid; background-image: none; color: black; background-color: white; border-color: gray; transition-duration: 50ms; }
 
 button.image-button.titlebutton, button.image-button { min-width: 24px; padding-left: 4px; padding-right: 4px; }
 

diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css
index b27d0575e9a52d2b3d7f298b37b5d405a26d78c7..4991ca921b5729cc08d3d2454935afe8cfb0c68b 100644 (file)
--- a/gtk/theme/HighContrast/gtk-contained.css
+++ b/gtk/theme/HighContrast/gtk-contained.css
@@ -158,29 +158,29 @@ spinbutton:not(.vertical) progress:backdrop, entry progress:backdrop { backgroun
 
 button.titlebutton, button { min-height: 24px; min-width: 16px; padding: 4px 8px; border: 1px solid; border-radius: 3px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border-width: 2px; border-style: solid; color: #000; background-image: none; background-color: #fff; border-color: gray; }
 
-button.sidebar-button, button.titlebutton, button.flat { border-width: 2px; border-style: solid; color: #000; background-color: transparent; background-image: none; border-color: transparent; transition: none; }
+button.titlebutton:disabled, button:disabled { border-width: 2px; border-style: solid; color: gray; background-color: white; border-color: silver; background-image: none; }
 
-button.sidebar-button:hover, button.titlebutton:hover, button.flat:hover { transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-duration: 500ms; }
+button.titlebutton:disabled:active, button.titlebutton:disabled:checked, button:disabled:active, button:disabled:checked { border-width: 2px; border-style: solid; color: gray; border-color: silver; background-image: none; background-color: white; }
 
-button.sidebar-button:hover:active, button.titlebutton:hover:active, button.flat:hover:active { transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
+button.titlebutton:backdrop, button:backdrop { border-width: 2px; border-style: solid; color: #000; background-color: #fff; border-color: #8d8d8d; background-image: none; -gtk-icon-effect: none; }
 
-button.sidebar-button:backdrop, button.titlebutton:backdrop, button.sidebar-button:disabled, button.titlebutton:disabled, button.sidebar-button:backdrop:disabled, button.titlebutton:backdrop:disabled, button.flat:backdrop, button.flat:disabled, button.flat:backdrop:disabled { border-width: 2px; border-style: solid; color: gray; background-color: transparent; background-image: none; border-color: transparent; }
+button.titlebutton:backdrop:active, button.titlebutton:backdrop:checked, button:backdrop:active, button:backdrop:checked { border-width: 2px; border-style: solid; color: white; background-color: #8d8d8d; border-color: #8d8d8d; background-image: none; }
 
-button.titlebutton:hover, button:hover { border-width: 2px; border-style: solid; color: #000; background-color: #fff; border-color: gray; background-image: none; -gtk-icon-filter: brightness(1.2); }
+button.titlebutton:backdrop:disabled, button:backdrop:disabled { border-width: 2px; border-style: solid; color: gray; background-color: white; border-color: silver; background-image: none; }
 
-button.titlebutton:active, button.titlebutton:checked, button:active, button:checked { border-width: 2px; border-style: solid; background-image: none; color: white; background-color: black; border-color: gray; transition-duration: 50ms; }
+button.titlebutton:backdrop:disabled:active, button.titlebutton:backdrop:disabled:checked, button:backdrop:disabled:active, button:backdrop:disabled:checked { border-width: 2px; border-style: solid; color: gray; border-color: silver; background-image: none; background-color: #f6f6f6; }
 
-button.titlebutton:backdrop, button:backdrop { border-width: 2px; border-style: solid; color: #000; background-color: #fff; border-color: #8d8d8d; background-image: none; -gtk-icon-filter: none; }
+button.sidebar-button, button.titlebutton, button.flat { border-width: 2px; border-style: solid; color: #000; background-color: transparent; background-image: none; border-color: transparent; transition: none; }
 
-button.titlebutton:backdrop:active, button.titlebutton:backdrop:checked, button:backdrop:active, button:backdrop:checked { border-width: 2px; border-style: solid; color: white; background-color: #8d8d8d; border-color: #8d8d8d; background-image: none; }
+button.sidebar-button:hover, button.titlebutton:hover, button.flat:hover { transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-duration: 500ms; }
 
-button.titlebutton:backdrop:disabled, button:backdrop:disabled { border-width: 2px; border-style: solid; color: gray; background-color: white; border-color: silver; background-image: none; }
+button.sidebar-button:hover:active, button.titlebutton:hover:active, button.flat:hover:active { transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
 
-button.titlebutton:backdrop:disabled:active, button.titlebutton:backdrop:disabled:checked, button:backdrop:disabled:active, button:backdrop:disabled:checked { border-width: 2px; border-style: solid; color: gray; border-color: silver; background-image: none; background-color: #f6f6f6; }
+button.sidebar-button:backdrop, button.titlebutton:backdrop, button.sidebar-button:disabled, button.titlebutton:disabled, button.sidebar-button:backdrop:disabled, button.titlebutton:backdrop:disabled, button.flat:backdrop, button.flat:disabled, button.flat:backdrop:disabled { border-width: 2px; border-style: solid; color: gray; background-color: transparent; background-image: none; border-color: transparent; }
 
-button.titlebutton:disabled, button:disabled { border-width: 2px; border-style: solid; color: gray; background-color: white; border-color: silver; background-image: none; }
+button.titlebutton:hover, button:hover { border-width: 2px; border-style: solid; color: #000; background-color: #fff; border-color: gray; background-image: none; -gtk-icon-filter: brightness(1.2); }
 
-button.titlebutton:disabled:active, button.titlebutton:disabled:checked, button:disabled:active, button:disabled:checked { border-width: 2px; border-style: solid; color: gray; border-color: silver; background-image: none; background-color: white; }
+button.titlebutton:active, button.titlebutton:checked, button:active, button:checked { border-width: 2px; border-style: solid; background-image: none; color: white; background-color: black; border-color: gray; transition-duration: 50ms; }
 
 button.image-button.titlebutton, button.image-button { min-width: 24px; padding-left: 4px; padding-right: 4px; }